<% content_for :content do %>

	<!-- widget grid -->
	<section id="widget-grid" class="">
	
		<!-- row -->
		<div class="row">
	
			<!-- NEW WIDGET START -->
			<article class="col-sm-12 col-md-12 col-lg-6">

				<!-- Widget ID (each widget will need unique ID)-->
				<div class="jarviswidget jarviswidget-color-blue" id="wid-id-1" data-widget-editbutton="false" data-widget-colorbutton="false" data-widget-deletebutton="false">
					<!-- widget options:
					usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">
	
					data-widget-colorbutton="false"
					data-widget-editbutton="false"
					data-widget-togglebutton="false"
					data-widget-deletebutton="false"
					data-widget-fullscreenbutton="false"
					data-widget-custombutton="false"
					data-widget-collapsed="true"
					data-widget-sortable="false"
	
					-->
					<header>
						<span class="widget-icon"> <i class="fa fa-sitemap"></i> </span>
						<h2>区域管理 </h2>
	
					</header>
	
					<!-- widget div-->
					<div>
	
						<!-- widget edit box -->
						<div class="jarviswidget-editbox">
							<!-- This area used as dropdown edit box -->
	
						</div>
						<!-- end widget edit box -->
	
						<!-- widget content -->
						<div class="widget-body">

							<%= form_for :user_permissions, :as => :post, :url => update_zone_admin_admin_path(@user),:class => "simple_form form-horizontal" do |f| %>
	
							<div class="tree smart-form">
								
								<ul>
									<li>
										<span><i class="fa fa-lg fa-folder-open"></i> 中国</span>
								    <ul>
							    	<% Province.includes(:cities => {:terminal_groups => {}}).all.each do |province| %>
							    		<li id="area-province-<%= province.id %>">
								    		<span>
								    			<i class="fa fa-lg <%= province.cities.present? ? 'fa-plus-circle' : 'fa-minus-circle' %>"></i> 
								    			<%= province.name %> 
								    		</span>
								    		<%= f.check_box "province_#{province.id}",style: "margin-left:10px;",class: "provinces",checked: @user.can_access?(province) %>
								    		<ul>
							    			<% province.cities.each do |city| %>
							    				<li id="area-city-<%= city.id %>">
							    					<span>
							    					<i class="fa fa-lg <%= city.terminal_groups.present? ? 'fa-plus-circle' : 'fa-minus-circle' %>"></i> 
							    					<%= city.name %>
							    					</span>
							    					<%= f.check_box "city_#{city.id}",style: "margin-left:10px;",class: "province_#{province.id} cities",checked: @user.can_access?(city) %>
							    					<ul>
							    						<% city.terminal_groups.each do |tg| %>
							    							<li>
							    							<span>
							    								<i class="icon-leaf"></i> <%= tg.group_name %>
							    							</span>
							    							<%= f.check_box "terminal_group_#{tg.id}",style: "margin-left:10px;",class: "city_#{city.id}",checked: @user.can_access?(tg) %>
							    							</li>
							    						<% end %>
							    					</ul>
							    				</li>
							    			<% end %>
								    		</ul>
							    		</li>
							    	<% end %>
								    </ul>
									</li>
								</ul>

							</div>
				
					    <%= f.hidden_field :user_id, value: @user.id %>
					    <br />
					    <input type="button" value="Cancel" onclick="history.back()" class="btn btn-default">
					    <%= f.submit "Update",confirm: "Are you sure?",class: "btn btn-primary" %>
					    <% end %>

						</div>
						<!-- end widget content -->
	
					</div>
					<!-- end widget div -->
	
				</div>
				<!-- end widget -->
	
			</article>
			<!-- WIDGET END -->
	
		</div>
	
		<!-- end row -->
	
		<!-- row -->
	
		<div class="row">
	
		</div>
	
		<!-- end row -->
	
	</section>
	<!-- end widget grid -->
<% end %>


<% content_for :js do %>

  <script type="text/javascript">

	$(document).ready(function(){

    $(".cities").click(function() {
    	if(this.checked){
    		$(".city_"+this.id.replace("user_permissions_city_","")).each(function(index,tg){
    			tg.checked = true
    		})
    	} else {
    		$(".city_"+this.id.replace("user_permissions_city_","")).each(function(index,tg){
    			tg.checked = false
    		})    		
    	}  
    });

    $(".provinces").click(function() {
    	if(this.checked){
    		$(".province_"+this.id.replace("user_permissions_province_","")).each(function(index,city){
    			if(city.checked == false)
  					$(city).trigger("click")
    		})
    	} else {
    		$(".province_"+this.id.replace("user_permissions_province_","")).each(function(index,city){
    			if(city.checked == true)
  					$(city).trigger("click")
    		})    		
    	}  
    });
	});

  </script>
<% end %>
